<template>
  <div class="nav3">
    <NavTitle title="当日卡口人流量分布排行" />
    <div v-if="infoData.length">
      <div v-for="(item, index) in infoData" :key="item.cameraName" class="list mt-3px">
        <div class="flex items-center gap-22px list_item pr-17px">
          <div class="list_item-l font-title mt-20px">TOP{{ index + 1 }}</div>
          <div class="flex-1 list_item-r">
            <div class="flex items-center justify-between pl-7px">
              <div>{{ item.cameraName }}</div>
              <div class="text-16px font-title">{{ item.total }}</div>
            </div>
            <div class="list_item-p mt-5px">
              <div class="jd" :style="{ width: getPreWidth(item.total) }"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <DwEmpty v-else class="h-268px" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import NavTitle from '@/components/NavTitle'
import { webWebsiteFlowApi } from '@/api'

const infoData = ref({})

const allWidth = ref(374)

const getPreWidth = (count) => {
  const allCount = infoData.value[0].total
  const data = (count / allCount) * allWidth.value
  return data + 'px'
}

const getData = async () => {
  const { data } = await webWebsiteFlowApi()
  infoData.value = data.slice(0, 8)
}

getData()

</script>

<style lang="scss" scoped>
.nav3 {
  color: #fff;
  .list_item-l{
    width: 60px;
    height: 22.5px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(222.88deg, rgba(51, 100, 173, 1) 0%, rgba(81, 147, 239, 1) 100%);
  }
  .list_item-p{
    position: relative;
    width: 374px;
    height: 8px;
    background: rgba(37, 75, 135, 0.5);
    border-radius: 10px;
    .jd{
      position: absolute;
      border-radius: 10px;
      left: 0;
      top: -1px;
      height: 10px;
      background: linear-gradient(270deg, rgba(57, 129, 212, 1) 0%, rgba(40, 97, 175, 1) 100%);
    }
  }
}

.list{
  &:nth-child(1){
    .list_item-l{
      background: linear-gradient(243.55deg, rgba(177, 38, 186, 1) 0%, rgba(147, 83, 244, 1) 100%);
    }
  }
  &:nth-child(2){
    .list_item-l{
      background: linear-gradient(100.7deg, rgba(84, 83, 244, 1) 0%, rgba(46, 62, 190, 1) 100%);
    }
  }
}
:deep(.navTitle) {
  height: 40px;

  .navTitle_tit {
    padding-top: 5px;
  }
}
</style>
